<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>乌龟游戏</title>
    <script type="text/javascript">
        //    第一步，先让乌龟动起
        function move(obj){
           // alert(obj);// 标签元素。
           //  alert(obj.value);
            var wugui = document.getElementById("wugui");
            wugui_left = wugui.style.left;
            wugui_top = wugui.style.top;
            // alert(wugui_left);
            // alert(wugui_top);
            wugui_top.substring(0,wugui_top.indexOf("p"));
            var top = parseInt(wugui_top.substring(0,wugui_top.indexOf("p")));
            var left = parseInt(wugui_left.substring(0,wugui_left.indexOf("p")));
            if(obj.value=="向上走"){
                //这个时候top改变。因为top的值 是一个字符串 函数，所以要用字符串去处理。
                top -=10;
                wugui.style.top = top+"px";
            }
            if (obj.value =="向下走"){
                top +=10;
                wugui.style.top=top+"px";
            }
            if(obj.value=="向左走"){
                left -=10;
                wugui.style.left=left+"px";
            }
            if(obj.value =="向右走"){
                left +=10;
                wugui.style.left=left+"px";
            }

        }
    </script>
</head>
<body>
<table border="1">
    <tr>
        <td></td>
        <td><input type="button" value="向上走" onclick="move(this)"/></td>
        <td></td>
    </tr>
    <tr>
        <td><input type="button" value="向左走" onclick="move(this)"/></td>
        <td></td>
        <td><input type="button" value="向右走" onclick="move(this)"/></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="button" value="向下走" onclick="move(this)"/></td>
        <td></td>
    </tr>
</table>
<!--把乌龟放在一个div-->
<div id="wugui" style="position: absolute ;left:100px;top:120px;">
    <img src="1.bmp" border="1" alt=""/>
</div>
<!--公鸡图片div-->
<div id="cock" style="left:200px;position:absolute;top:200px;">
    <img src="2.bmp" border="1" alt=""/>
</div>
</body>
</html>